<template>
	<view>
		<view class="dropdown_box">
			<!-- 标题 -->
			<view class="dropdown_item" v-for="(item,index) in title_data" :key="index" @tap="titleClick(index)">
				<text class="title" :style="{'color': (title_index == index?'#3c9cff':'')}">{{item}}</text>
				<u-icon :name="title_index == index?'arrow-up-fill':'arrow-down-fill'" size="10"
					:color="title_index == index?'#3c9cff':'#ccc'"></u-icon>
			</view>
			<!-- 遮罩层 -->
			<view class="custom_mask" @tap="click" v-if="title_index || title_index == 0">
			</view>
			<view v-show="title_index == 0" class="area_box">
				<view class="room_box">
					<view v-for="(item,index) in screen" :key="index" @tap="screenClick(index)" class="screen_item">
						<text class="sceen_text"
							:style="{'color': (screen_index == index?'#3c9cff':'')}">{{item.name}}</text>
					</view>
				</view>
			</view>

			<view v-if="title_index == 2" class="area_box">
				<view class="rent_range_box">
					<view class="rent_range_item">
						<text @tap="rentClick(index)" :style="{'color': (rent_index == index?'#3c9cff':'')}"
							v-for="(item,index) in priceValue" class="rent_range">{{item[0]}}万元-{{item[1]}}万元</text>
					</view>
					<view class="drag_rent_box">
						<view class="drag_rent">
							<view class="room_box_botton">
								<view class="reset_bottom" @tap="rentClick(null)">重置</view>
								<view class="sure_bottom" @click="rentConfirm">确定</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 筛选 -->
			<view v-show="title_index == 3" class="area_box">
				<view class="room_box">
					<roomCell title="车型" :itemData="characteristic_data" ref="carModelRef"></roomCell>
					<roomCell title="座位数" :itemData="tenancy_data" ref="tenancyRef"></roomCell>
					<roomCell title="能源" :itemData="elevator_data" ref="elevatorRef"></roomCell>
					<view class="room_boxes">
						<view class="room_box_botton">
							<view class="reset_bottom" @click="deleteSelect">重置</view>
							<view class="sure_bottom" @click="screenConfirm">确定</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="title_index == 1" :closeable="true" @close="()=>{title_index=null}" mode="bottom" round="20"
			zIndex="10071">
			<view style="height: 85vh;padding: 50px 0 0;">
				<u-index-list :index-list="indexList">
					<template v-for="(item, index) in brandList">
						<!-- #ifdef APP-NVUE -->
						<u-index-anchor :text="indexList[index]"></u-index-anchor>
						<!-- #endif -->
						<u-index-item>
							<!-- #ifndef APP-NVUE -->
							<u-index-anchor :text="indexList[index]"></u-index-anchor>
							<!-- #endif -->
							<view class="list-cell" v-for="(cell, index) in item" @click="cellClick(cell)">
								<!-- <u--image :showLoading="true" :src="cell.logo" width="40px" height="40px"  :lazy-load="true"></u--image> -->
								<view>
									{{cell.name}}
								</view>
							</view>
						</u-index-item>
					</template>
				</u-index-list>
			</view>
		</u-popup>
		<u-popup :show="showCarModel" mode="right" :overlayStyle="{'z-index':10074}" @close="showCarModel=false"
			round="5">
			<view class="model-box">
				<view class="model-list">
					<view class="model-item" v-for="item in modelList" :key="item.id" @click="modelSelect(item.id)">
						{{item.name}}
					</view>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	// 导入滑块组件
	import cjSlider from './cj-slider/cj-slider.vue'
	import roomCell from './room_cell/room_cell.vue'

	export default {
		components: {
			roomCell,
			cjSlider
		},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			indexList: {
				type: Array,
				default () {
					return []
				}
			},
			brandList: {
				type: Array,
				default () {
					return []
				}
			},
			modelList: {
				type: Array,
				default () {
					return []
				}
			},
		},
		name: "uni-dropdown",
		data() {
			return {
				screen: [{
						id: 1,
						name: '智能排序'
					},
					{
						id: 2,
						name: '价格最低'
					},
					{
						id: 3,
						name: '价格最高'
					},
					{
						id: 4,
						name: '座位最多'
					}
				],
				screen_index: null,
				priceValue: [{
						0: 0,
						1: 10
					},
					{
						0: 10,
						1: 20
					},
					{
						0: 20,
						1: 30
					},
					{
						0: 30,
						1: 50
					}, {
						0: 50,
						1: 100
					},
					{
						0: 100,
						1: 200
					}
				],
				characteristic_data: ['SUV', 'SRV', 'CRV', 'CUV', 'RV', 'HRV', 'RAV', 'MPV', 'NCV'], //车型
				tenancy_data: ['一座', '二座', '三座', '四座', '五座', '六座', '七座', '八座'], //座位数
				elevator_data: ['汽油', "油电混合", '柴油', '95'], //能源
				title_data: ['智能排序', '品牌', '价格', '筛选'],
				title_index: null,
				left_index: null,
				center_index: null,
				rent_index: null,
				showCarModel: false,
			};
		},
		methods: {
			screenClick(index) {
				this.screen_index = index
				this.title_data[0] = this.screen[index].name;
				this.title_index = null
				this.$emit('typeTagsChange', this.screen_index)
			},
			click() {
				this.title_index = null
			},
			rentClick(index) {
				this.rent_index = index
			},
			rightClick(index) {
				this.center_index = index
			},
			titleClick(index) {
				if (this.title_index == index) {
					this.title_index = null
					return;
				}
				this.title_index = index
			},
			//筛选汽车品牌
			cellClick(cell) {
				if(cell.id===""){
					this.$emit('getAllCar')
					this.title_index = null
				}else{
					this.$emit('brandToModel', cell.id)
					this.showCarModel = true;
				}
			},
			// 筛选车型
			modelSelect(model_id) {
				this.$emit('selectModel', model_id)
				this.showCarModel = false;
				this.title_index = null;
			},
			// 
			rentConfirm(){
				this.$emit('priceSelect',this.priceValue[this.rent_index])
				this.title_index = null;
			},
			deleteSelect(){
				this.$refs.carModelRef.itemClick_index=null;
				this.$refs.tenancyRef.itemClick_index=null;
				this.$refs.elevatorRef.itemClick_index=null;
			},
			screenConfirm(){
				let car_model=this.$refs.carModelRef.itemClick_index;
				let seating=this.$refs.tenancyRef.itemClick_index === null ? null : this.$refs.tenancyRef.itemClick_index+1;
				let drive=this.elevator_data[this.$refs.elevatorRef.itemClick_index]
				console.log(car_model,seating,drive);
				this.$emit('screenSelect',car_model,seating,drive)
				this.title_index = null;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dropdown_box {
		position: relative;
		display: flex;
		justify-content: space-around;
		padding-bottom: 20upx;

		.dropdown_item {
			display: flex;
			position: relative;
			color: #1890FF;

			.title {
				margin-right: 10upx;
				font-size: 24upx;
				font-weight: 500;
				color: #666666;
			}
		}
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.screen_item {
		padding: 30upx 25upx 0;

		.sceen_text {
			font-size: 28upx;
			font-weight: 500;
			color: #666666;
		}
	}

	.custom_mask {
		position: absolute;
		height: 100vh;
		width: 100%;
		opacity: 0.4;
		background: #333;
		z-index: 99;
		top: 50upx;
	}

	.area_box {
		position: absolute;
		z-index: 9999;
		top: 50upx;
		width: 100%;
		background-color: #fff;

		.screen_bottom_button {
			height: 10vh;
			width: calc(100% - 28%);
			position: absolute;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			box-shadow: 0px -1px 2px 0px rgba(153, 153, 153, 0.10);

			.reset_bottom {
				width: 200upx;
				height: 72upx;
				border: 1px solid #e6e6e6;
				border-radius: 4upx;
				font-size: 24upx;
				color: #999999;
				text-align: center;
				line-height: 72upx;
			}

			.sure_bottom {
				width: 200upx;
				height: 72upx;
				border: 1px solid #3c9cff;
				border-radius: 4upx;
				font-size: 24upx;
				color: #FFFFFF;
				background-color: #3c9cff;
				text-align: center;
				line-height: 72upx;
			}
		}

		.area {
			display: flex;
			width: 100%;
			height: 60vh;

			.left {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 28%;
				height: 100%;
				background-color: #F4F4F4;
				font-size: 24upx;

				.left_name {
					margin-top: 48upx;
				}
			}

			.center_right_box {
				width: calc(100% - 28%);
				display: flex;
				flex-direction: column;

				.center_right_item {
					display: flex;

					.center {
						width: 45%;
						display: flex;
						flex-direction: column;
						align-items: center;
						overflow-y: scroll;
						height: 50vh;
						border-right: 1px solid #e6e6e6;
						margin-bottom: 30upx;

						.all_area {
							padding: 30upx 0;
							font-size: 24upx;
							color: #333333;
						}
					}

					.right {
						margin-bottom: 60upx;
						overflow-y: scroll;
						height: 50vh;
						width: 55%;
						padding: 30upx 40upx 0 40upx;
					}
				}
			}
		}

		//价格区间
		.rent_range_box {
			height: 66vh;

			.rent_range_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 100%;
				height: 52vh;
				overflow-y: scroll;
				padding-top: 40upx;
				// background-color: #1890FF;

				.rent_range {
					margin-bottom: 38upx;
					font-size: 24upx;
					color: #333333;
				}
			}

			.drag_rent_box {
				position: absolute;
				bottom: 0;
				z-index: 999;
				background-color: #FFFFFF;
				width: 100%;
				margin-top: 100upx;
				height: calc(66vh - 52vh);
				// background-color: #91CB74;
				box-shadow: 0px -1px 4px 0px rgba(153, 153, 153, 0.10);

				.drag_rent {
					display: flex;
					flex-direction: column;
					width: 90%;
					margin: auto;

					.drag_rent_name {
						font-size: 28upx;
						color: #3c9cff;
						width: 100%;
						text-align: center;
						position: absolute;
						bottom: 240upx;
						left: 0;

					}

					.slider_box {
						width: 90%;
						position: absolute;
						// background-color: #666666;
						bottom: 150upx;
					}

					.room_box_botton {
						position: absolute;
						bottom: 10upx;
						width: 80%;
						left: 50%;
						transform: translate(-50%, 0);
						height: 130upx;
						display: flex;
						justify-content: space-around;
						align-items: center;

						.reset_bottom {
							width: 200upx;
							height: 72upx;
							border: 1px solid #e6e6e6;
							border-radius: 4upx;
							font-size: 24upx;
							color: #999999;
							text-align: center;
							line-height: 72upx;
						}

						.sure_bottom {
							width: 200upx;
							height: 72upx;
							border: 1px solid #3c9cff;
							border-radius: 4upx;
							font-size: 24upx;
							color: #FFFFFF;
							background-color: #3c9cff;
							text-align: center;
							line-height: 72upx;
						}
					}
				}
			}

		}

	}

	.room_box {
		width: 100%;
		height: 50vh;
		background-color: #FFFFFF;
		overflow-y: scroll;
		padding-bottom: 130upx;

		.room_boxes {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 130upx;
			margin: auto;
			background: #ffffff;
			box-shadow: 0px -1px 4px 0px rgba(153, 153, 153, 0.10);

			.room_box_botton {
				width: 70%;
				margin: auto;
				height: 130upx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.reset_bottom {
					width: 200upx;
					height: 72upx;
					border: 1px solid #e6e6e6;
					border-radius: 4upx;
					font-size: 24upx;
					color: #999999;
					text-align: center;
					line-height: 72upx;
				}

				.sure_bottom {
					width: 200upx;
					height: 72upx;
					border: 1px solid #3c9cff;
					border-radius: 4upx;
					font-size: 24upx;
					color: #FFFFFF;
					background-color: #3c9cff;
					text-align: center;
					line-height: 72upx;
				}
			}
		}

	}

	.model-box {
		padding-top: 88upx;
		width: 45vw;
		height: 100vh;
		overflow-y: auto;

		.model-list {
			padding-left: 20upx;

			.model-item {
				height: 65upx;
				line-height: 65upx;
				font-size: 26upx;
				border-bottom: 1upx solid #f6f6f6;
			}
		}
	}
</style>
